<template>
	<div v-loading="loading" class="addDialog">
		<el-dialog :visible.sync="visible" title="新增" width="30%" :close-on-click-modal="false" :show-close="false">
			<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
				<el-form-item label="模板渠道" prop="tempChannel">
					<el-select v-model="ruleForm.tempChannel" placeholder="请选择 模板渠道" style="width: 100%;"><el-option label="Ali_SMS" value="Ali_SMS" /></el-select>
				</el-form-item>
				<el-form-item label="模板内容" prop="tempContent"><el-input v-model="ruleForm.tempContent" placeholder="请输入 模板内容" /></el-form-item>
				<el-form-item label="模板编码" prop="tempCodeNo"><el-input v-model="ruleForm.tempCodeNo" placeholder="请输入 模板编码" /></el-form-item>
				<el-form-item label="AccessKey" prop="AccessKey"><el-input v-model="ruleForm.AccessKey" placeholder="请输入 AccessKey"/></el-form-item>
				<el-form-item label="Secret" prop="Secret"><el-input v-model="ruleForm.Secret" placeholder="请输入 Secret" /></el-form-item>
				<el-form-item label="签名" prop="signature"><el-input v-model="ruleForm.signature" placeholder="请输入 签名" /></el-form-item>
				<el-form-item label="模板Code" prop="tempCode"><el-input v-model="ruleForm.tempCode" placeholder="请输入 模板Code" /></el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="visible = false">取 消</el-button>
				<el-button type="primary" @click="submitForm('ruleForm')">保 存</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { postCreateSmsTemp } from '@/api/smsTemplate';
// 引入模块
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			loading: false,
			visible: false,
			ruleForm: {
				tempChannel: '',
				tempContent: '',
				tempCodeNo: '',
				AccessKey: '',
				Secret: '',
				signature: '',
				tempCode: ''
			},
			rules: {
				tempChannel: [{ required: true, message: '请选择模板渠道', trigger: 'change' }],
				tempContent: [{ required: true, message: '请输入模板内容', trigger: 'blur' }],
				tempCodeNo: [{ required: true, message: '请输入模板编码', trigger: 'blur' }],
				AccessKey: [{ required: true, message: '请输入AccessKey', trigger: 'blur' }],
				Secret: [{ required: true, message: '请输入Secret', trigger: 'blur' }],
				signature: [{ required: true, message: '请输入签名', trigger: 'blur' }],
				tempCode: [{ required: true, message: '请输入模板Code', trigger: 'blur' }]
			}
		};
	},
	computed: {
		...mapGetters(['tenantId','sourceName','deptNo','deptId'])
	},
	methods: {
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				const cloudSmsTempForm = {
					tenantId: this.tenantId,
					deptName: this.sourceName,
					deptNo: this.deptNo,
					deptId: this.deptId,
					templateContent: this.ruleForm.tempContent,
					templateCode: this.ruleForm.tempCodeNo,
					accessKey: this.ruleForm.AccessKey,
					accessSecret: this.ruleForm.Secret,
					templateSign: this.ruleForm.signature,
					sourceTemplateCode: this.ruleForm.tempCode,
					isDeleted: 0
				};
				if (valid) {
					this.loading = true;
					postCreateSmsTemp(cloudSmsTempForm)
						.then(res => {
							if (res.code === 0) {
								this.loading = false;
								this.visible = false;
								this.ruleForm = {
									tempChannel: '',
									tempContent: '',
									tempCodeNo: '',
									AccessKey: '',
									Secret: '',
									signature: '',
									tempCode: ''
								};
								this.$message({
									message: '新增成功！',
									type: 'success'
								});
								this.$emit('fevent');
							}
						})
						.catch(() => {
							this.loading = false;
						});
				} else {
					return false;
				}
			});
		},
		addEdit() {
			this.visible = true;
		}
	}
};
</script>

<style lang="scss" scoped>
.addDialog {
}
</style>
